<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>代理ip列表</title>
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<style>
.container {
  margin-top: 20px;
}
.odd {
  background-color: #f9f9f9;
}
.bar {
  border: 1px solid #bebebe;
  width: 100px;
  height: 8px;
}
.bar .bar_inner {
  height: 8px;
}
.bar .medium {
  background-color: #FA894A;
}
.bar .fast {
  background-color: #59B145;
}
.bar .slow {
  background-color: #c50c2e;
}
</style>
</head>
<body>
  <div class="container">
    <div class="panel panel-default">
      <div class="panel-heading">用户列表
        <button class="btn btn-primary btn-xs pull-right" onclick="writeDown()">写入</button>
      </div>
      <div class="panel-body">
        <p class="loading">载入中...</p>
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>ip地址</th>
              <th>端口</th>
              <th>速度</th>
              <th>连接时间</th>
              <th>选中</th>
            </tr>
          </thead>
          <tbody id="ip_list">

          </tbody>
        </table>
      </div>
    </div>
  </div>
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
</script>
<script type="text/javascript" src="node_modules/jquery/jquery.min.js"></script>
<script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="node_modules/lowdb/dist/lowdb.min.js"></script>
<script type="text/javascript" src="node_modules/lodash/lodash.min.js"></script>
<script type="text/javascript" src="node_modules/dot/doT.min.js"></script>
<script>
var low = nodeRequire('lowdb');
const db = low('db.json');
onload = function() {
  getProxyFromXici();
}

function getProxyFromXici() {
  console.log('载入页面');
  let xhr = new XMLHttpRequest();
  xhr.open('GET', 'http://www.xicidaili.com/nn');
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
  xhr.addEventListener('load', function() {
    let result = xhr.responseText;
    $('.loading').remove();
    $(result).find('#ip_list tr').each(function(index, domEle) {
      if(index > 0) {
        $(domEle).find('td:eq(0), td:eq(3), td:eq(4), td:eq(5), td:eq(8), td:eq(9)').remove();
        let ip = $(domEle).find('td:eq(0)').text() + ':' + $(domEle).find('td:eq(1)').text();
        $(domEle).append("<td><input type='checkbox' value='" + ip + "'></td>");
        $('#ip_list').append(domEle);
      }
    });
    // $('.container').html($(result).find('#ip_list'));
    // let result = JSON.parse(xhr.responseText);
  });
  xhr.send();
}
function writeDown() {
  let fs = nodeRequire('fs');
  let ip_list_count = $('#ip_list').find('input[type=checkbox]:checked').length;
  let ip_arr = [];
  $('#ip_list').find('input[type=checkbox]:checked').each(function(index, domEle) {
    let ip_info = $(domEle).val();
    let ip_info_arr = ip_info.split(':');
    low('db.json').get('proxy_ip').push({ip: ip_info_arr[0], port: ip_info_arr[1]}).value();

    if(index == ip_list_count - 1) {
      //修改成功后，关闭当前页，并刷新父页面
      let ipcRenderer = nodeRequire('electron').ipcRenderer;
      ipcRenderer.send('refresh_proxy_ip','');
      nodeRequire('electron').remote.getCurrentWindow().close();
    }
  });
}
</script>
</body>
</html>
